<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            margin: 0 auto;
            width: 80%;
            border: black 1px solid;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    //3.构造函数
    function Person(username, gender, age, id) {
        //对象的属性赋值
        this.username = username;
        this.gender = gender;
        this.age = age;
        this.id = id;
        //返回对象的json字符串
        this.toString = function () {
            return `{"username","${this.username}","gende","${this.gende}","age","${this.age}","id","${this.id}"}`
        }
        //返回用户的用户名的函数
        this.getUsername = function () {
            return this.username
        }
    }
    let p = new Person("tom", '男', 20, 1)
    p.age = 22
    let info = p.toString()
    app.innerHTML = info
    //对象p1
    let p1 = new Person("wenddy", '女', 20, 2)

    //this对象
    //1.任何时候this都是js的原生对象
    //2.默认（全局作用域）情况下this=window对象
    //3.在构造函数中this指的是：当前的调用对象
    app.onclick = function () {
        console.log(this) //app
    }
</script>

</html>